<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/header-aside.css">
  <style> 
   
    #content>#main{
      width: 85% ;
      height: 100%;
      background-color: rgb(228, 227, 227);
      float: left;
      padding: 40px;
      /* box-sizing: 可以改变盒模型占据空间位置的计算方式 */
      /* 宽高+内边距+边框 == 实际占据的位置 */
      /* box-sizing: border-box;  宽高 = 实际占据的位置   */
      box-sizing: border-box;
    }
    #main table{
      margin: 75px auto;
    }
    #main>div:nth-of-type(1){
      margin: 20px;
    }
    #main>div:nth-of-type(1)>button{
      margin-bottom: 30px;
    }
    .fenye{
      margin: auto;
      /* 设置最大宽度 */
      display: flex;
      justify-content: center;
      text-align: center;
    }
    .fenye div{
      float: left;
      background-color: pink;
      cursor: pointer;
      display: inline;
    }
    #content .fenye div .active{
      background-color:yellowgreen;
    }
    .fenye>div:not(:nth-child(2)){
      text-align: center;
      width: 75px;
      height: 30px;
      line-height: 30px;
      border: 1px solid red;
    }
    .fenye>div:nth-child(2){
      height: 30px;
      line-height: 30px;
    }
    .fenye>div:nth-child(2) div{
      width: 50px;
      text-align: center;
      border: 1px solid red;
    }
    #content .kongkong{
      text-align: center;
    }
    #xiugaikuang,#tianjiakuang{
      position: absolute;
      width: 400px;
      height: 300px;
      left: calc(50% - 200px);
      top: 300px;
      background-color: hotpink;
      text-align: center;
      display: none;
    }
  </style>
</head>
<body>
  <header id="nav">  
    <h2>内师学生管理系统</h2>
    <div id="loginout">
      xxx,欢迎你 
      <button>
        <a href="./day4-3.html">退出</a>
      </button>
    </div>
  </header>
  <section id="content">
    <aside>
      <ul>  
        <li class="active">学生管理</li>
        <li>班级管理</li>
        <li>成绩管理</li>
        <li>专业管理</li>
        <li>学科管理</li>
      </ul>
    </aside>
    <div id="main">
      <div>
        <button onclick="addTankuang()">添加学生</button>
        <div>
          <label>
            学生姓名: <input type="text">
          </label>
          <label>
            学生班级: <input type="text">
          </label>
          <label>
            学号: <input type="text">
          </label>
        </div>
      </div>
      <table border="1">
        <thead>
          <tr >  
            <th>学号</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
            <th>学生性别</th>
            <th>学生专业</th>
            <th>学生年级</th>
            <th>学生班级</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="mytbody">
         
        </tbody>
      </table>
      <div class="fenye clear">
        <div id="pre" onclick="prePage()">上一页</div>
        <div class="clear" id="fenyeDiv">
         
        </div>
        <div id="next" onclick="nextPage()">下一页</div>
      </div>
      <div id="xiugaikuang">
        <h1>修改学生</h1>
        <form action="">
          <div>
            <label >
              学号: <input disabled type="text" id="xuehao">
            </label>
          </div>
          <div>
            <label >
              学生姓名: <input type="text" id="xingming">
            </label>
          </div>
          <div>
            <label >
              学生性别: <input type="text" id="xingbie">
            </label>
          </div>
          <div>
            <label >
              学生年龄: <input type="text" id="nianling">
            </label>
          </div>
          <div>
            <label >
              学生专业: <input type="text" id="zhuanye">
            </label>
          </div>
          <div>
            <label >
              学生年级: <input type="text" id="nianji">
            </label>
          </div>
          <div>
            <label >
              学生班级: <input type="text" id="banji">
            </label>
          </div>
          <div>
            <button type="button" onclick="querenxiugai()">修改</button>
            <button type="button" onclick="quxiao(this)">取消</button>
          </div>
        </form>
      </div>
      <div id="tianjiakuang">
        <h1>添加学生</h1>
        <form action="">
          <div>
            <label >
              学生姓名: <input type="text" id="addxingming">
            </label>
          </div>
          <div>
            <label >
              学生性别: <input type="text" id="addxingbie">
            </label>
          </div>
          <div>
            <label >
              学生年龄: <input type="text" id="addnianling">
            </label>
          </div>
          <div>
            <label >
              学生专业: <input type="text" id="addzhuanye">
            </label>
          </div>
          <div>
            <label >
              学生年级: <input type="text" id="addnianji">
            </label>
          </div>
          <div>
            <label >
              学生班级: <input type="text" id="addbanji">
            </label>
          </div>
          <div>
            <button type="button" onclick="addStu()">添加</button>
            <button type="button" onclick="quxiao(this)">取消</button>
          </div>
        </form>
      </div>
    </div>
  </section>
  <script>
    // 第一步:将数据初始化,并将数据渲染到页面上
    // 1.1:创建变量 这个变量是模拟从后端拿到的学生数据
    var studentList = [
      {id:1,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:2,name:'李四',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:3,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:4,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:5,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:6,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:7,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:8,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:9,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:10,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:11,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:12,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:13,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:14,name:'王五',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:15,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:16,name:'赵刘',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:17,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:18,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:19,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:20,name:'李qi7',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:21,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:22,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:23,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:24,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:25,name:'孙事宜',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:26,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:27,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:28,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:29,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:30,name:'张三丰',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:31,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
      {id:32,name:'张三',age:19,sex:'女',major:'计算机科学与技术',grade:'大二',className:'一班'},
    ]
    var tbody = document.getElementById('mytbody')
    var fenyeDiv = document.getElementById('fenyeDiv')
    var maxPage = 1
    var pageSize = 5
    var dangqianye = 1
    // 1.2:将数据渲染到页面 其实是大步骤  
    // 1.2.1 依托数据将html结构添加到指定的dom节点中去  数据有多少条 table就有多少行 
      // 本质上就是往tbody里面添加tr,td 每个td就应该显示数据数组里面的对象的对应数据
      // tbody.innerhtml = xxxx ???  <tr><td>数据的id</td></tr> 
      // 当完成代码后思考 我后面应该会反复渲染table  所以我应该将渲染页面封装成一个方法 方便我们反复调用
      // 这时本质上就是把刚刚的代码放到函数里面 这时候这个函数需不需要有参数呢???

    
    function showTable(data,dom){
      dom.innerHTML = ''
      if(data.length>0){
        for(var i=0;i<data.length;i++){
        dom.innerHTML+= `
          <tr>
            <td>${data[i].id}</td>
            <td>${data[i].name}</td>
            <td>${data[i].age}</td>
            <td>${data[i].sex}</td>
            <td>${data[i].major}</td>
            <td>${data[i].grade}</td>
            <td>${data[i].className}</td>
            <td>
              <button onclick='updateStu(${JSON.stringify(data[i])})'>修改</button>
              <button onclick='delStu(${data[i].id})'>删除</button>
              <button>查看</button>
            </td>
          </tr>
        `
        }
        return
      }

      dom.innerHTML='<tr align="center"><td colspan="8">空空如也</td></tr>'
    }
    
    // 第二步  这时渲染了所有数据 -- 应该对数据源进行截取 当前页应该渲染0~4条数据第二页应该渲染5~9条数据
    // 2.1 只渲染当前页数据
    function showData(yema){
      // 截取数据
      let start = (yema-1)*5
      let end = start+5
      var newData = studentList.slice(start,end)
      showTable(newData,tbody)
      dangqianye = yema
      // 这里有页码 所以在这里改变按钮的样式最方便
      if(newData.length>=1){
        var anniuList = fenyeDiv.getElementsByTagName('div')
        for(var i=0;i<anniuList.length;i++){
          anniuList[i].classList.remove('active')
        }
        anniuList[yema-1].classList.add('active')
      }
      
    }
    fenye(studentList,fenyeDiv)
    showData(dangqianye)
 
    // 2.2 这时应该去渲染 分页  如何渲染呢  上一页  1,2,3,4,5 下一页  动态的东西是页码 页码由总数据源来决定  总数据源的长度/当前页展示的条数 并向上取整
    // 就是页码的个数 例如 7  则页码应该是1,2,3,4,5,6,7
    function fenye(data,dom){
      maxPage = Math.ceil(data.length/pageSize) 
      dom.innerHTML = ''
      for(var i=1;i<=maxPage;i++){
        dom.innerHTML += `<div onclick='showData(${i})'>${i}</div>`
      }
      if(data.length==0){
        var shangyiye = document.getElementById('pre')
        var xiayiye = document.getElementById('next')
        var fenyeDiv = document.getElementById('fenyeDiv')
        shangyiye.style.display = 'none'
        xiayiye.style.display = 'none'
        fenyeDiv.style.display = 'none'
      }
    }
    // 第三步
    // 3.1 给页码绑定点击事件  点击页码1 则table显示第一页的数据(0~4条) 点击页码2则table显示第二页的数据(5~9条) 第三页(10~14条)
    
    // 3.2 给上一页,下一页绑定点击事件   事件处理函数做什么呢  本质上就是模拟点击页码 假设当前页是4页点击上一页其实就是点击页码3  下一页就是点击页码5
    //     所以 可以服用点击页码的函数 但是要去处理上一页,下一页的页码 需要记录当前页的页码是多少
    function prePage(){
      if(dangqianye>1){
        dangqianye = dangqianye - 1
        showData(dangqianye) 
        return
      }
      alert('已经到第一页,无法上一页')
    }
    function nextPage(){
      if(dangqianye<maxPage){
        dangqianye = dangqianye + 1
        showData(dangqianye) 
        return
      }
      alert('已经到最后一页,无法下一页')
    }
    // 第四步
    // 4.1 解决页码的高亮问题  当前页是第一页 则页码样式不一样  点击页码4 则页码4样式改变 其他页码样式回复
    // 在哪里给div按钮加样式 思考第一页,第二页按钮是个集合  有多少个
    // 先拿到这个几个根据集合的下标改编某个div的class
    // 解决某个  


    // 12日下午
    // 1.删除学生
    // 点击删除按钮 -->  删除trtd 这些dom节点 -->删除数组里面的某一行数据
    function delStu(stuId){
      // 删除某个学生
      for(var i=0;i<studentList.length;i++){
        if(studentList[i].id==stuId){
          studentList.splice(i,1)
          break
        }
      }
      fenye(studentList,fenyeDiv)
      showData(dangqianye)
    }

    // 2.修改
    // 点击修改按钮  弹出一个框  这个框里面是表单元素 这个学生的信息应该在这些表单元素里面
    // 点击确定修改 数据发生改变 页面table发生改变
    function updateStu(stu){
      var xiugaiDiv = document.getElementById('xiugaikuang')
      xiugaiDiv.style.display = 'block'
      // 这里需要知道要修改的学生的数据
      console.log(stu)
      var xuehao = document.getElementById('xuehao')
      var xingming = document.getElementById('xingming')
      var xingbie = document.getElementById('xingbie')
      var nianling = document.getElementById('nianling')
      var zhuanye = document.getElementById('zhuanye')
      var nianji = document.getElementById('nianji')
      var banji = document.getElementById('banji')
      xuehao.value = stu.id
      xingming.value = stu.name
      xingbie.value = stu.sex
      nianling.value = stu.age
      zhuanye.value = stu.major
      nianji.value = stu.grade
      banji.value = stu.className
    }
    function quxiao(obj){
      obj.parentNode.parentNode.parentNode.style.display = 'none'
    }
    function querenxiugai(){
      var xuehao = document.getElementById('xuehao')
      var xingming = document.getElementById('xingming')
      var xingbie = document.getElementById('xingbie')
      var nianling = document.getElementById('nianling')
      var zhuanye = document.getElementById('zhuanye')
      var nianji = document.getElementById('nianji')
      var banji = document.getElementById('banji')
      var stu = {
        id:xuehao.value,
        name:xingming.value,
        sex:xingbie.value,
        age:nianling.value,
        major:zhuanye.value,
        grade:nianji.value,
        className:banji.value
      }
      for(var i=0;i<studentList.length;i++){
        if(studentList[i].id==stu.id){
          studentList[i] = stu
          break
        }
      }
      fenye(studentList,fenyeDiv)
      showData(dangqianye)
      var xiugaiDiv = document.getElementById('xiugaikuang')
      xiugaiDiv.style.display = 'none'
    }
    function addTankuang(){
      var addDiv = document.getElementById('tianjiakuang')
      addDiv.style.display = 'block'
    }
    function addStu(){
      var xingming = document.getElementById('addxingming')
      var xingbie = document.getElementById('addxingbie')
      var nianling = document.getElementById('addnianling')
      var zhuanye = document.getElementById('addzhuanye')
      var nianji = document.getElementById('addnianji')
      var banji = document.getElementById('addbanji')
      var xuehao = parseInt(Math.random()*1000)
      for(var i=0;i<studentList.length;i++){
        if(studentList[i].id==xuehao){
          xuehao = parseInt(Math.random()*1000)
          i=-1
        }
      }
      var stuObj = {
        id:xuehao,
        name:xingming.value,
        sex:xingbie.value,
        age:nianling.value,
        major:zhuanye.value,
        grade:nianji.value,
        className:banji.value
      }
      studentList.push(stuObj)
      fenye(studentList,fenyeDiv)
      showData(dangqianye)
      var tianjiaDiv = document.getElementById('tianjiakuang')
      tianjiaDiv.style.display = 'none'
      xingming.value =''
      xingbie.value =''
      nianling.value =''
      zhuanye.value =''
      nianji.value =''
      banji.value =''
    }
  </script>
</body>
</html>